<!--
 * @Author: your name
 * @Date: 2021-09-05 19:10:59
 * @LastEditTime: 2021-10-13 11:41:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \traning\src\views\Show.vue
-->
<template>
  <div>
    <div class="chooseTable">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input
            v-model="formInline.username"
            placeholder="姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input
            v-model="formInline.sex"
            placeholder="性别"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="序号" width="55" align="center">
          <template slot-scope="scope">
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="年龄" width="120" align="center" prop="age">
          <!-- <template slot-scope="scope">{{ scope.row.age }}</template> -->
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          show-overflow-tooltip
          align="center"
        >
          <!-- <template slot-scope="scope">
            {{ scope.row.isMale ? "男" : "女" }}
          </template> -->
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="昵称"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="email"
          label="邮箱"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column> -->
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="avatar"
          label="头像"
          show-overflow-tooltip
          align="center"
        > -->
        <!-- <template slot-scope="scope"> -->
        <!-- <img :src="scope.row.avatar" alt="" /> -->
        <!-- </template> -->
        <!-- </el-table-column> -->
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      formInline: {
        username: "",
        sex: "",
      },
      currentPage: 1,
      pageSize: 10,
      total: 6,
      tableData: [
        {
          id: 1,
          name: "小李",
          age: 24,
          sex: "女",
          nickName: "miss",
          phone: "12345678901",
          address: "中国**",
          createTime: "2021-07-21",
        },
        {
          id: 2,
          name: "小姜",
          age: 23,
          sex: "男",
          nickName: "Theshy",
          phone: "12345678901",
          address: "韩国仁川",
          createTime: "2018-11-03",
        },
        {
          id: 2,
          name: "小宁",
          age: 23,
          sex: "男",
          nickName: "Ning",
          phone: "12345678901",
          address: "中国**",
          createTime: "2018-11-03",
        },
        {
          id: 2,
          name: "小宋",
          age: 25,
          sex: "男",
          nickName: "Rookie",
          phone: "12345678901",
          address: "韩国仁川",
          createTime: "2018-11-03",
        },
        {
          id: 2,
          name: "小喻",
          age: 19,
          sex: "男",
          nickName: "JackeyLove",
          phone: "12345678901",
          address: "中国**",
          createTime: "2018-11-03",
        },
        {
          id: 2,
          name: "小蓝",
          age: 23,
          sex: "男",
          nickName: "Baolan",
          phone: "12345678901",
          address: "中国**",
          createTime: "2018-11-03",
        },
      ],
    };
  },
  mounted() {
    // this.getTableData();
  },
  // watch: {
  //   pageSize() {
  //     this.tableData = this.tableData.slice(0, this.pageSize);
  //   },
  // },
  methods: {
    onSubmit() {
      // debugger;
      if (this.formInline.sex) {
        var newData = this.tableData;
        this.tableData = [];
        newData.map((item) => {
          if (item.sex == this.formInline.sex) {
            this.tableData.push(item);
          }
        });
      }

      if (this.formInline.username) {
        var data = this.tableData;
        this.tableData = [];
        data.map((item) => {
          if (item.name == this.formInline.username) {
            this.tableData.push(item);
          }
        });
      }
    },
    handleSizeChange(val) {
      console.log(val);
    },
    handleCurrentChange(val) {
      //上下页
      this.currentPage = val;
      this.getTableData();
    },
    getTableData() {
      // try {
      //   const { data: res } = await axios.post("http://localhost:8080/list");
      //   console.log(res);
      //   if (res.code == 0) {
      //     console.log(res.data);
      //     let tableDatas = res.data.data;
      //     this.tableData = tableDatas.slice(
      //       (this.currentPage - 1) * this.pageSize,
      //       this.currentPage * this.pageSize
      //     );
      //   }
      // } catch (e) {
      //   return false;
      // }
      // return;
    },
    handleSelectionChange() {},
  },
};
</script>

<style>
</style>
